<template>
  <div style="position: relative">
    <el-tooltip
      placement="top"
      effect="light"
      :enterable="true"
      teleported
      :append-to="props.appendTo"
      trigger="hover"
    >
      <div @click="isShowPopover = !isShowPopover" class="edgeButtonContainer">
        <img
          style="width: 24px; height: 24px"
          src="@/assets/lifecycle/edgeBtn.svg"
        />
      </div>
      <template #content>
        <ul class="edgeTooltipClass">
          <li>
            <span class="label">流转动作名称</span
            ><span class="val">进行中</span>
          </li>
          <li>
            <span class="label">流转方向</span><span class="val">进行中</span>
          </li>
          <li>
            <span class="label">可操作状态流转角色</span
            ><span class="val">进行中</span>
          </li>
        </ul>
      </template>
    </el-tooltip>
    <div v-show="isShowPopover" class="edgePopoverClass">
      <ul class="popoverList">
        <li @click="handleSetting" class="popoverItem">
          <img src="@/assets/lifecycle/setting.svg" />状态流转设置
        </li>
        <li style="color: #d54941" @click="handleDelEdge" class="popoverItem">
          <img src="@/assets/lifecycle/delete.svg" />删除流转连线
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ElTooltip } from "element-plus";
  import { ref } from "vue";
  import { CellView } from "@antv/x6";
  const props = defineProps({
    appendTo: {
      type: HTMLElement,
      default: () => null,
    },
    cellView: {
      type: CellView,
      default: () => {},
    },
  });

  const isShowPopover = ref(false);
  const handleSetting = () => {};

  const handleDelEdge = () => {
    console.log(
      props.cellView.graph.removeCell(props.cellView.cell),
      "handleDelEdge",
    );
  };
</script>

<style scoped lang="scss">
  .edgeButtonContainer {
    width: 24px;
    height: 24px;
    //border-radius: 4px;
    //border: 1px solid #d9dde2;
    //background: #f4f5f7;
    cursor: pointer;
    //display: flex;
    //align-items: center;
    //justify-content: center;
  }
  .edgeTooltipClass {
    width: 234px !important;
    padding: 7px 0 !important;
    margin: 0;
    li {
      display: flex;
      justify-content: space-between;
      .label {
        color: #5e5e5e;
        font-size: 12px;
      }
      .val {
        color: #141414;
        font-size: 12px;
      }
    }
  }
  .edgePopoverClass {
    position: absolute;
    width: 141px;
    top: 27px;
    border: 1px solid #f2f2f2;
    padding: 4px;
    border-radius: 4px;
    box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.16);
    background: #fff;
    .popoverList {
      padding: 0;
      margin: 0;
      list-style: none;
      .popoverItem {
        font-size: 14px;
        color: #2e405e;
        height: 32px;
        border-radius: 4px;
        background: #fff;
        transition: background-color 0.2s;
        cursor: pointer;
        display: flex;
        align-items: center;
        padding: 0 9px;
        &:hover {
          background: #f5f6f8;
        }
        img {
          width: 14px;
          height: 14px;
          margin-right: 9px;
        }
      }
    }
  }
</style>
